<template>
  <el-card
    :shadow="shadow"
    :header="header"
    :body-style="{ 'padding-bottom': 0 }"
    class="card-box"
  >
    <template v-if="$slots.header" #header>
      <slot name="header"></slot>
    </template>
    <el-form
      ref="formRef"
      :model="formModel"
      :rules="rules"
      v-bind="{ ...formConfig, ...props }"
    >
      <slot></slot>
    </el-form>
    <div class="form-card__content">
      <slot name="content" />
    </div>
  </el-card>
</template>

<script setup name="CardForm">
import { cardFormProps } from './props'
import useForm from '@/hooks/useForm'

const modelValue = defineModel({ type: Object, default: () => {} })
const props = defineProps(cardFormProps)

const { formConfig } = useForm()

const formRef = ref(null)

const formModel = computed({
  get: () => modelValue.value,
  set: (val) => (modelValue.value = val),
})

defineExpose(
  new Proxy(
    {},
    {
      get(target, key) {
        return formRef.value?.[key]
      },
      has(target, key) {
        return key in formRef.value
      },
    },
  ),
)
</script>

<style scoped lang="scss">
.form-card__content {
  margin-bottom: calc(var(--el-card-padding) - 2px);
}
</style>
